<script setup>
import {getCurrentInstance,watch,reactive,ref} from "vue"
import { useRoute } from 'vue-router';
import tools from "../tools/tools";
const route = useRoute()
const {proxy} = getCurrentInstance()
const musicList=reactive({})
const loading = ref(false)
proxy.$https.search({keywords:sessionStorage.getItem("songName")})
        .then((res)=>{
            musicList.value = res.data.result.songs
        })
watch(() => route.params.keywords, (n)=>{
    loading.value=true
    const obj={ keywords:n}     
  proxy.$https.search(obj)
    .then((res)=>{
        musicList.value=res.data.result.songs
        loading.value=false
    })
})

function getId(allrow){
    //allrow为整行信息，通过自定义事件传
   let i = {
        id:allrow.id,
        name:allrow.name,
        ar:[{name:allrow.artists[0].name}],
        al:{picUrl:allrow.album.artist.img1v1Url}
    }
     ElNotification({
        message: `<div style="display:flex;align-items: center;"><img width='50px' src="http://127.0.0.1:5173/src/assets/OIP-C.jpg"/><span>抱歉，搜索列表点击播放歌曲，不可手动切换，本功能正在开发。</span></div>`,
        showClose: false,
        dangerouslyUseHTMLString:true,
        duration:3000,
        position: 'top-left',
     })
    tools.E.emit("Myevent",i);
}




</script>

<template>
   <h2>搜索&nbsp;&nbsp;{{ route.params.keywords }}</h2>
    <div class="loading" v-show="loading">加载中...</div>
    <el-table empty-text="加载中..." v-show="!loading" :data="musicList.value" style="width: 100%;height: 350px; overflow: auto;">
    <el-table-column prop="name" label="歌曲" width="200" />
    <el-table-column prop="artists[0].name" label="歌手" width="200" />
    <el-table-column prop="album.name" label="专辑" width="400" />
    <el-table-column prop="address" label="播放">
    <template v-slot="scope">
    <el-button @click="getId(scope.row)">
    点击播放
    </el-button>
    </template>
    </el-table-column>
    </el-table>
</template>


<style scoped>
h2{
    margin-bottom: 20px;
    
}
.loading{
    width: 100%;
    display: flex;
    align-items: center;
}
</style>